<style>
*{padding:0; margin:0; list-style:none;}
a{text-decoration:none;}
.quick{
	height:45px;
}
.quick ul{
	position:fixed;
	z-index:200;
	bottom:0;
	left:0;
	width:100%
}
.quick li{
	border:1px solid #b5b5b8;
	height:45px;
	border-bottom:0;
	border-right:0;
	position:relative;
	-webkit-box-shadow:inset 0 0 3px #fff;
}
.quick li:nth-of-type(1){border-left;0;}
.quick li>a{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	border-bottom:0;
	display:block;
	line-height:45px;
	text-align:center;
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#bebdbe));
}
.quick li>a.on + dl{
	display: block;
}
.quick li>a span{
	color:#4f4d4f;
	display:inline-block;
	padding-left:20px;
	background:url('./themes/mobile/quick/images/quick2.png') no-repeat 3px center;
	-webkit-background-size:16px 16px;
	background-size:14px 14px;
	text-shadow:0 0 1px #fff;
}
.quick li>a:only-child span{
	background:none!important;
	padding-left:0;
}
/***********************/
.quick dl{
	display:none;
	position:absolute;
	z-index:220;
	bottom:60px;
	left:50%;
	min-width:80px;
	margin-left:-50px;
	background:red;
	min-height:100px;
	background:#e4e3e2;
	border:1px solid #afaeaf;
	border-radius:5px;
	-webkit-box-shadow:inset 0 0 3px #fff;
}
.quick dl:before, .quick dl:after{
	content:"";
	display:inline-block;
	position:absolute;
	z-index:240;
	bottom:0;
	left:50%;
	width:0;
	height:0;
	border:8px solid red;
	border-color:#afaeaf transparent transparent transparent;
	margin-left:-8px;
	margin-bottom:-16px;
}
.quick dl:after{
	z-index:241;
	border-color:#e4e3e2 transparent transparent transparent;
	margin-bottom:-15px;
}
.quick dl dd{
	margin:0;
	line-height:50px;
	text-align:center;
	background:-webkit-gradient(linear, 0 0, 100% 0, from(#e4e3e2), to(#e4e3e2), color-stop(50%, #f3f3f2)), -webkit-gradient(linear, 0 0, 100% 0, from(#e4e3e2), to(#e4e3e2), color-stop(50%, #c6c5c5));
	background-size:110% 1px, 110% 2px;
	background-repeat:no-repeat;
	background-position: center bottom;
}
.quick dl dd:last-of-type{
	background:none;
}
.quick dl dd a{
	display:block;
	color:#4f4d4f;
	text-shadow:0 0 1px #fff;
}
.quick-box {
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.quick-box > * {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
}
</style>

<div class="top_bar footer_bar">
	<div class="quick">
		<ul class="quick-box">
			{php $i = 1;$k = 0;}
			{loop $_W['quickmenu']['menus'] $nav}
			{if $i < 4}
			<li>
				<a href="{$nav['url']}" style="{$nav['css']['icon']['style']}">
					<span style="{$nav['css']['name']}">{$nav['name']}</span>
				</a>
			</li>
			{/if}
			{if $i==4}
			{php $k = 1;}
			<li>
				<a href="javascript:;" onclick="this.classList.toggle('on');">
					<span>更多</span>
				</a>
				<dl>
			{/if}
			{if $i>3}
					<dd>
						<a href="{$nav['url']}">
							<span style="{$nav['css']['name']}">{$nav['name']}</span>
						</a>
					</dd>
			{/if}
			{php $i++;}
			{/loop}
			{if $k==1}
				</dl>
			</li>
			{/if}
		</ul>
	</div>
</div>